// ==========================================================================
// Add new question
// ==========================================================================

// .expanding-spacer-between-rows BECOMES .survey__row__spacer
.survey__row__spacer {
  position: relative;
  .line {
    height: 0px;
  }
}

.row__questiontypes {
  border: $cardInSortBorderStyle;
  padding: 0px;
  padding-top: 20px;
  background: white;
  margin: 4px 0px;
}

.row__questiontypes__list {
  margin-top: 20px;
  border-top: $cardInSortBorderStyle;
  padding: 3px;
  position: relative;
  &:after, &:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #FFF;
    border-width: 8px;
    margin-left: -8px;
  }
  &:before {
    border-color: rgba(217, 221, 225, 0);
    border-bottom-color: #3fa2ee;
    border-width: 11px;
    margin-left: -11px;
  }
}

.row__questiontypes__close {
  position: absolute;
  top: 3px;
  right: 3px;
  color: #555;
  background: transparent;
  border: 0 none;
  font-family: $font;
  font-weight: 600;
  padding: 4px;
  line-height: 1em;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    color: darken(#999, 30%);
  }
}

.survey-editor--singlequestion .row__questiontypes__close {
  display: none;
}

input.row__questiontypes__new-question-name {
  border: 0;
  border-radius: 0px;
  font-weight: 600;
  padding: 0px 40px;
  min-width: 99%;
}

.row__questiontypes--namer {
  height: 68px;
  padding: 15px 10px;
  margin-bottom: 20px;
  form {
    input {
      width: 72%;
      padding: 6px;
      border: 1px solid #78C4FD;
      font-size: 15px;
    }
    button {
      padding: 8px;
      text-align: center;
      color: white;
      font-weight: 600;
      margin-bottom: 15px;
      background: #39BF6E;
      border: none;
      border-bottom: 2px solid darken(#39bf6e, 10%);
      font-size: 14px;
      width: 25%;
      margin-left: 2%;
      cursor: pointer;
    }
    input, button {
      float: left;
    }
  }
}

// ==========================================================================
// The question type selector icon menu
// ==========================================================================

// .menu-row BECOMES .questiontypelist__row
.questiontypelist__row {
  width: 25%;
  padding-right: 1px;
  float: left;
}

// .menu-item BECOMES .questiontypelist__item
.questiontypelist__item {
  margin-bottom: 1px;
  padding: 10px 5px;
  font-size: 11px;
  font-family: $font;
  font-weight: 600;
  cursor: pointer;
  color: #35495D;
  i {
    margin-right: 10px;
    font-size: 16px;
    &.fa.invert {
      background-color: #35495D;
      color: white;
      border-radius: 4px;
      padding: 3px;
      font-size: 1em;
      margin-left: 2px;
      margin-right: 13px;
    }
  }
  &:hover {
    border-color: $cardInSortBorderColor;
    color: $cardInSortBorderColor;
    i.fa.invert {
      background-color: $cardInSortBorderColor;
    }
  }
}

// Force hover through jQuery for arrow key navigation
.questiontypelist__item-force-hover {
  @include form-builder-focus();

  color: $cardInSortBorderColor;

  i.fa.invert {
    background-color: $cardInSortBorderColor;
  }
}
